<template>
  <div id="box">
    <el-row class="tac">
      <el-col :span="8" style="border: 1px">
        <el-row style="margin-bottom: 30px">
          <i class="el-icon-goods" style="font-size: 20px">活动详情</i>
        </el-row>
        <!-- 活动名称 -->
        <el-row>
          <el-col :span="20">
            <div class="grid-content bg-purple">
              {{ newServer.name }}
            </div>
          </el-col>
        </el-row>
        <!-- 活动配图 -->
        <el-row>
          <el-image :src="newServer.image" style="width: 85%">
            <div slot="error" class="image-slot">
              <div slot="error">
                <img
                  src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2165691866,2570924737&fm=26&gp=0.jpg"
                  width="100%"
                />
              </div>
            </div>
          </el-image>
        </el-row>
        <!-- 活动发布者 -->
        <el-row>
          <el-col :span="20">
            <div class="grid-content bg-purple-light">
         <i class="el-icon-s-custom"></i>活动发布者：{{userAndActivity.user.account}}
               
            </div>
          </el-col>
        </el-row>
       
         <!-- <p v-if="userAndActivity.user.account">{{userAndActivity.user.account}} </p> -->
        <!-- 活动地点 -->
        <el-row>
          <el-col :span="20">
            <div class="grid-content bg-purple-dark">
     <i class="el-icon-s-promotion"></i>  活动地点：{{ newServer.address }}
            </div>
          </el-col>
          <!-- 活动时间 -->
        </el-row>

        <el-col :span="20">
       <div class="grid-content bg-purple-light">  <i class="el-icon-eleme"></i>活动开始时间： {{ newServer.time }}</div>
        </el-col>

        <el-col :span="20">
          <div class="grid-content bg-purple-light">
    <i class="el-icon-s-opportunity"></i> 活动内容：{{ newServer.content }}
          </div>
        </el-col>
      </el-col>
      <!-- 活动详情右边栏 -->
     
       <!-- 评论 -->
      <el-col :span="8"
              style="border:1px">
        <el-row style="margin-bottom:30px">
          <i class="el-icon-document"
             style="font-size:20px">活动评论</i>
        </el-row>

        <el-table :data="commentAndReply"
                  style="width: 100%"
                  max-height="60%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left"
                       inline
                       class="demo-table-expand">

                <el-row>
                  <el-form-item label="回复时间："
                                style="width:100%">
                    <span>{{ props.row.activityCommentAndReply.replytime }}</span>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="回复内容："
                                style="width:100%">
                    <span>{{ props.row.activityCommentAndReply.reply}}</span>
                  </el-form-item>
                </el-row>
                <!-- <el-row>
                  <el-form-item label="操作："
                                style="width:100%"
                                v-show="props.row.mine">
                    <i class="el-icon-delete"
                       @click="del(props.row)">删除</i>
                  </el-form-item>

                  <el-form-item label="操作："
                                style="width:100%"
                                v-show="props.row.replyContent==null">
                    <i class="el-icon-edit"
                       @click="rep(props.row)">回复评论</i>
                  </el-form-item>
                </el-row> -->
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="评论者"
                           prop="account">
          </el-table-column>
          <el-table-column label="评论时间"
                           prop="time">
          </el-table-column>
          <el-table-column label="评论内容"
                           prop="content">
          </el-table-column>

        </el-table>

      </el-col>

      <!-- 回复评论 -->
      <el-col :span="7"
              style="margin-left:4%">
        <el-row style="margin-bottom:30px">
          <i class="el-icon-edit"
             style="font-size:20px">回复评论</i>
        </el-row>

        <el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="请输入内容"
  v-model="comments">

  
</el-input>
 <el-button type="primary"
                       @click="onSubmit">回复</el-button>

       <!-- 参与活动 -->
        <el-button :plain="true" @click="openVn" type="success">参与活动</el-button>

      </el-col>
    </el-row>

    <div style="width: 40%"></div>
  </div>
</template>
<script>
import axios from "axios";
import http from '../../../axios_config'
import LoginVue from '../../Login.vue';
export default {
    components:{
     
    },
  props: {
    server: {},
    userAndActivity:{},
    commentAndReply:[]
  },
  //当组件创建完毕后自动调用此方法
  created() {
    this.newServer = this.server;
    console.log(this.newServer);
  },
  data() {
    return {
      success:false,
      comtent:'活动报名成功',
      comments:'',
      activeName: '1',
      newServer: {},
    
    };
  },
  methods: {
    // 参与活动
      openVn() {
        const h = this.$createElement;
        
        this.$message({
          
          message: h('p', null, [
          
            h('span', null, this.comtent),
            // h('i', { style: 'color: teal' }, 'VNode')
          ])
        });

if (this.success) {
  
  http.get("http://192.168.11.18:8080/userAndActivity/participateActivities/"+this.newServer.id).then(({data}) => {    
       console.log(data);  
       if (data.state="SUCCESS") {
        
         this.success=true
       } else {
         this.success=false
       }
            
      })
}else{
  this.comtent="您已报名活动"
}


      

      },
    //取消按钮方法
    cancel() {
      //通知父组件关闭对话框
      this.$emit("closedialog");
    },

    //回复按钮方法
    onSubmit() {
      http.get("http://192.168.11.18:8080/activityComment/addActivityComments/"+this.comments+"/"+this.newServer.id).then(({data}) => {    
       console.log(data); 
       if(data.state== "SUCCESS"){
 http.get("http://192.168.11.18:8080/activityComment/findAllactivityComment/"+this.newServer.id).then(({data}) => {    
       console.log(data);      
       this.commentAndReply=data.data
      })
       }     
      })

      
     
    },
  },
};
</script>
<style scoped>
el-row {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.el-col {
  border-radius: 25px;
}
/* .bg-purple-dark {
  background: #99a9bf;
} */

/* .bg-purple-light {
  background: #e5e9f2;
} */
.grid-content {
  border-radius: 25px;
  min-height: 36px;
  text-align: center;
  padding-top: 15px;
  margin: 10px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bg-purple {
  background: #d3dce6;
}
</style>